<template>
<div id="app" class="app">
    <!--
    具体使用：
    1、验证指令 v-wpg-validator
        使用示例：v-wpg-validator="required|email|phone|min(3)|max(10)|between(5,15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)|remote(url)"
        参数说明：
        required  验证是否是必填项
        email 验证是否是邮箱
        phone 验证是否是电话号码
        min(5) 验证最小值
    max(3) 验证最大值
        between(3,5) 验证区间
        minlength(6) 验证最小长度
        maxlength(12) 验证最大长度
        regex(/^[0-9]*$/) 进行正则验证
        remote('http://fyz.test.com/') 进行请求服务器来做验证 
        ================================================== 
        配置提示文字：
        validator-errormsg-required="XXXX"  配置 required  时,出错的提示文字
        validator-errormsg-email="XXXX"     配置 email     时,出错的提示文字
        validator-errormsg-phone="XXXX"     配置 phone     时,出错的提示文字
        validator-errormsg-min="XXXX"       配置 min       时,出错的提示文字
        validator-errormsg-max="XXXX"       配置 max       时,出错的提示文字
        validator-errormsg-between="XXXX"   配置 between   时,出错的提示文字
        validator-errormsg-minlength="XXXX" 配置 minlength 时,出错的提示文字
        validator-errormsg-maxlength="XXXX" 配置 maxlength 时,出错的提示文字
        validator-errormsg-regex="XXXX"     配置 maxlength 时,出错的提示文字
        validator-errormsg-remote="XXXX"    配置 remote    时,出错的提示文字
        =============================================
        验证必须是数字：/^[0-9]*$/
        验证由26个英文字母组成的字符串：/^[A-Za-z]+$/
        验证手机号： /^[1][3,4,5,7,8][0-9]{9}$/;
        验证邮箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
    2、提交验证指令 v-wpg-validator-form
        具体使用 给form表单设置 id action 后，添加 v-wpg-validator-form 指令即可
    -->
    <h2>wpg-validator</h2><!-- type="normal" --> 
    <form id="form" v-wpg-validator-form action="http://fyz.thinkphp.com/Home/Index/save" method="post">
        <p>xxx</p>
        <div class="input">
            <input type="text" class="validator-input" name="title" v-wpg-validator="required|xxx" validator-errormsg-required="亲，我是不能为空的" validator-errormsg-regex="输入有误" validator-placement="top">
        </div>
        <p>fyz</p>
        <div class="input">
            <input type="text" class="validator-input" name="title" v-wpg-validator="required|fyz" validator-errormsg-required="亲，我是不能为空的" validator-errormsg-regex="输入有误" validator-placement="top">
        </div>
        <p>xyz</p>
        <div class="input">
            <input type="text" class="validator-input" name="title" v-wpg-validator="required|xyz" validator-errormsg-required="亲，我是不能为空的" validator-errormsg-regex="输入有误" validator-placement="top">
        </div>
        <p>required</p>
        <div class="input">
            <input type="text" class="validator-input" name="title" v-wpg-validator="required" validator-errormsg-required="亲，我是不能为空的" validator-errormsg-regex="输入有误" validator-placement="top">
        </div>      
        <p>test remote</p>
        <div class="input">
            <input type="text" class="validator-input" name="name" v-wpg-validator="required|remote('http://fyz.thinkphp.com/Home/Index/test')" validator-errormsg-required="我不能为空" validator-placement="top">
        </div>
        <p>email</p>
        <div class="input">
            <input type="text" class="validator-input" name="email" v-wpg-validator="required|email" validator-errormsg-email="我不是一个邮箱" validator-placement="right">
        </div>
        <p>phone</p>
        <div class="input">
            <input type="text" class="validator-input" name="phone" v-wpg-validator="phone|required" validator-errormsg-phone="请输入电话号码" validator-placement="left">
        </div>
        <p>min</p>
        <div class="input">
            <input type="text" class="validator-input" name="min" v-wpg-validator="min(5)">
        </div>
        <p>max</p>
        <div class="input">
            <input type="text" class="validator-input" name="max" v-wpg-validator="max(8)|required" validator-errormsg-max="我不能大于8" >
        </div>
        <p>between</p>
        <div class="input">
            <input type="text" class="validator-input" name="between" v-wpg-validator="between(5,10)">
        </div>
        <p>regex</p>
        <div class="input">
            <input type="text" class="validator-input" name="regex" v-wpg-validator="required|regex(/^[0-9]*$/)" validator-errormsg-regex="请输入正确的格式">
        </div>
        <p>remote</p>
        <div class="input">
            <input type="text" class="validator-input" name="remote" v-wpg-validator="required|remote('http://fyz.thinkphp.com/Home/Index/test')">
        </div>
        <!-- <p>textarea</p>
        <div class="input">
            <textarea name="desc" v-wpg-validator="required"></textarea>
        </div> -->
        <div class="input">
            <input type="submit" class="validator-input" value="提交">
        </div>
    </form>
</div>
</template>
<script> 
export default { 
  name: 'App',
  data () {
    return {
      msg: 'Test',
      list:[0,1,2,3]
    }
  },
  methods:{
    // 提交测试
    // checkForm: function (e) {
    //   // 进行验证 验证通过就返回 true
    //   if(clickValidate("form")){
    //     return true;
    //   };
    //   e.preventDefault();
    // },
  }
}
</script>

<style>
#app{padding-bottom:300px;}
/*.app p{width: 500px; margin:0px auto;}
.input{padding-bottom:20px; width: 500px; margin:0px auto;}
.app input{width: 298px; height: 35px; outline:none; background:#ddd;}
.app span{padding-left:20px;}
.tipsDiv{height:27px; line-height: 25px; border:1px solid #333; background:#333; padding: 0px 5px; border-radius:4px; color:#fff; font-size:16px;}
.tipsDiv:before{content:''; display: block; border-width:0 5px 8px; border-style:solid; border-color:transparent transparent #000; position:absolute; top:-9px; left:6px;}*/
.app p{width: 500px; margin:0px auto;}
.app .input{width: 500px; margin:0px auto; padding-bottom:20px;}
.app input{width: 300px;}

</style>
